<template>
	<div class="context">

		<h2 class="h2">添加店铺</h2>
		<div class="from">

			<el-form :label-position="labelPosition" label-width="80px" :rules="rules" :model="shop">
				<div id="middle">
					<!--  上传头像  -->
					<!--  action是请求提交的地址  -->
					<el-upload class="avatar-uploader" action="/shop/upload/avatar" :headers="headers"
						:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
						style="display: inline-block;width: 300px">

						<el-avatar :size="200">
							<el-image :src="shop.headPortrait" class="headPicture" style="width: 100%; height: 100%;">
							</el-image>
						</el-avatar>

					</el-upload>
				</div>
				<el-form-item label="名称" style="width: 350px;">
					<el-input v-model="shop.shopName"></el-input>
				</el-form-item>
				<el-form-item label="电话" style="width: 350px;">
					<el-input v-model="shop.phone"></el-input>
				</el-form-item>
				<el-form-item label="地址" style="width: 350px;">
					<el-input v-model="shop.address"></el-input>
				</el-form-item>
				<el-form-item label="店铺分类" style="width: 350px;">
					<el-input v-model="shop.shopType"></el-input>
				</el-form-item>
				<el-form-item label="营业执照">
					<el-upload class="upload-demo" action="/shop/upload/avatar"
						:on-change="handleChange" :file-list="fileList">
						<el-button type="primary">上传营业执照</el-button>
					</el-upload>
				</el-form-item>
			</el-form>
			<div class="butten">
				<el-button type="primary" @click="Add()">提交</el-button>
				<el-button type="info">取消</el-button>

			</div>

		</div>
	</div>
</template>

<script>
	import qs from 'qs'
	import ElNotification from 'element-plus'
	export default {
		data() {
			return {
				shop: {
					shopName: '兰州拉面',
					phone: '12345678998',
					shopType: '面食',
					address: '湖南省长沙市岳麓区杜鹃路诚兴园1111号',
					headPortrait: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
				},
				rules: {
					shopName: {
						required: true,
						message: '请输入店铺名称！',
						trigger: 'blur'
					},
					shopType: {
						required: true,
						message: '请输入店铺类型！',
						trigger: 'blur'
					},
					phone: {
						required: true,
						message: '请输入联系方式！',
						trigger: 'blur'
					},
					address: {
						required: true,
						message: '请输入店铺地址！',
						trigger: 'blur'
					},
				},
			};
		},
		methods: {
			getheadPortrait() {
				this.$axios.get("/shop/getheadPortrait")
					.then(res => {
						this.shop.headPortrait = res.headPortrait
					})
			},
			//处理头像成功
			handleAvatarSuccess(res, file) {
				console.log("res,file" + "," + file);
				console.log("上传头像");
				//刷新当前页面
				// location.reload();
				this.getheadPortrait()
			},

			//上传头像之前
			beforeAvatarUpload(file) {
				console.log("file=" + file);
			},
			Add() {
				this.$axios.post('/shop/addShop', qs.stringify(this.shop))
					.then(res => {
						console.log("res.judge:" + res.judge)
						if (res.judge) {
							ElNotification({
								title: '温馨提示',
								message: '信息提交成功！'
							})
						} else {
							ElNotification({
								title: '温馨提示',
								message: '信息提交成功！'
							})
						}

					})
			}
		}
	}
</script>

<style>
	.h2 {
		line-height: 20px;
	}

	.context {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-left: 20px;
		margin-top: -10px;
	}

	.from {
		margin-left: 380px;
	}

	#middle {
		padding-bottom: 20px;
		padding-left: 20px;
	}


	
</style>
